$(function() {
    // 一进入页面就发送ajax请求
    function getList() {
        $.ajax({
            type: 'get',
            url: '/admin/category/list',
            success: function(backData) {
                console.log(backData);
                // 调用模板
                let categoryRes = template('categoryTemp', backData);
                // 把模板渲染到页面 
                $('tbody').html(categoryRes)
            }
        });
    }
    getList();

    // 显示模态框
    $('#xinzengfenlei').on('click', function() {
        $('#myModal').modal();
    });
    $('.btn_opt').on('click', function(e) {
        e.preventDefault()
        let name = $('[name="name"]').val().trim();
        let slug = $('[name="slug"]').val().trim();
        // console.log(name, slug);
        $.ajax({
            type: 'post',
            url: '/admin/category/add',
            data: {
                name,
                slug
            },
            // 调用token
            success: function(backData) {
                console.log(backData);
                if (backData.code == 200) {
                    // 隐藏模态框
                    $('#myModal').modal('hide');
                    // 调用函数完成局部刷新
                    getList();
                    // 清空文本框
                    $('[name="name"]').val('');
                    $('[name="slug"]').val('');
                } else {
                    layer.msg(backData.msg)
                }
            }
        })

    });

    // 编辑
    // 利用id来查询分类数据，然后把数据放到修改模态框的文本框内
    $('tbody').on('click', 'a.btn-cancel', function() {
        // 显示模态框
        $('#editModal').modal();
        // 获取编辑按钮的自定义属性id值
        let editId = $(this).attr('data-id');
        // console.log(editId);
        // 发送ajax请求
        $.ajax({
            type: 'get',
            url: '/admin/category/search',
            data: {
                id: editId
            },
            success: function(backData) {
                console.log(backData);
                //请求查询数据成功就把数据显示到模态框的文本框和id显示在隐藏域中
                if (backData.code == 200) {
                    $('#name').val(backData.data[0].name);
                    $('#slug').val(backData.data[0].slug);
                    // 利用隐藏域来获取id值
                    $('[name="id"]').val(backData.data[0].id);
                }
            }
        })
    });
    // 获取文本框的内容，发送ajax来请求数据修改数据
    $('.btn-save').on('click', function(e) {
        // 阻止表单默认提交行为
        e.preventDefault();
        // 获取表单数据和隐藏域的id数据
        let name = $('#name').val().trim();
        let slug = $('#slug').val().trim();
        let inpid = $('[name="id"]').val().trim();
        // console.log(name, slug, inpid);
        // 发送ajax请求
        $.ajax({
            type: 'post',
            url: '/admin/category/edit',
            data: {
                name,
                slug,
                id: inpid
            },
            success: function(backData) {
                // 判断数据是否修改成功
                console.log(backData);
                // 成功就隐藏模态框，并且提示和刷新页面
                if (backData.code == 200) {
                    $('#editModal').modal('hide');
                    layer.msg(backData.msg);
                    getList();
                } else {
                    // 失败提示
                    layer.msg(backData.msg)
                }
            }
        })
    })

    // 删除
    // 利用委托来删除
    $('tbody').on('click', 'a.btn-del', function() {
        // 获取删除按钮自定义属性设置的id
        let deteteId = $(this).attr('data-id');
        // layui 弹出层-询问框
        layer.confirm('是否确定删除?', function(index) {
            // 发送ajax请求
            $.ajax({
                type: 'post',
                url: '/admin/category/delete',
                data: { id: deteteId },
                success: function(backData) {
                    // 判断是否删除成功
                    if (backData.code == 200) {
                        // 成功提示并且刷新页面
                        layer.msg(backData.msg);
                        getList();
                    } else {
                        // 失败提示
                        layer.msg(backData.msg);
                    }
                }
            })
            layer.close(index);
        });

    })
})